、<template>
  <div class="createCourseBox">
    <!-- 创建课程ALL -->
    <div class="lineAll">
      <div class="titleAll ">
        <div class="public-header">
            <div class="public-header-ch">创建课程</div>
            <div class="public-header-en">CREATE COURSE</div>
            <div class="public-header-line"></div>
        </div>
        <img src="../../static/image/icon-title.png">
      </div>

      <!-- 创建课程-01开始 -->
      <div class="create_one" v-if="courseListShow == 'cjkc'">
        <div class="remind">
          <i>1</i><i></i><i>2</i>
          <p><span class="blue">创建课程</span><span>加入学员</span></p>
        </div>
        <div class="contentone">
          <div class="contentone_cen">
            <h4><i></i>课程名称</h4>
            <input v-model="createCourseData.courseName" type="text" placeholder="请输入课程名称" @change="validateData('courseName')" @blur="validateData('courseName')">
            <div class="cue" v-show="courseNameErr"><i></i>课程名称不能为空</div>
          </div>
          
          <div class="startTime">
            <h4><i></i>开始时间</h4>
            <div class="startTimeCen" >
              <el-date-picker v-model="createCourseData.startDate" type="date" placeholder="选择日期" @change="validateData('startDate')" @blur="validateData('startDate')"></el-date-picker>
              <el-time-picker 
                style="border:none;" arrow-contro v-model="createCourseData.startTime" value-format="HH:mm" format="HH:mm"
                placeholder="任意时间"  
                @change="validateData('startTime')" 
                @blur="validateData('startTime')">
              </el-time-picker>
            </div>
            <div class="cue" v-show="startDateErr" style="float:left"><i></i>开始日期不能为空</div>
            <div class="cue" v-show="startTimeErr" style="float:left"><i></i>开始时间不能为空</div>  
          </div>
          <div class="stopTime marginLeft">
            <h4><i></i>结束时间</h4>
            <div class="stopTimeCen" >
              <el-date-picker v-model="createCourseData.endDate" type="date" placeholder="选择日期" @change="validateData('endDate')"  @blur="validateData('endDate')"></el-date-picker>
              <el-time-picker style="border:none;" 
                arrow-contro v-model="createCourseData.endTime"  value-format="HH:mm" format="HH:mm"
                placeholder="任意时间" @change="validateData('endTime')" @blur="validateData('endTime')">
              </el-time-picker>
            </div>      
            <div class="cue" v-show="endDateErr" style="float:left"><i></i>结束日期不能为空</div>
              <div class="cue" v-show="endTimeErr" style="float:left"><i></i>结束时间不能为空</div>       
              <div class="cue" v-show="endTimeHaErr" style="float:left"><i></i>结束时间不能小于开始时间</div>    
          </div>
          <div class="clear"></div>
          
          <div class="rounds">
            <h4><i></i>轮数</h4>
            <div class="roundsCen">
              <select v-model="createCourseData.roundNumber" @blur="validateData('roundNumber')" @change="validateData('roundNumber')">
                <option v-for="(option,index) in options" v-bind:value="option.value" :key="index">{{option.text}}</option>                
              </select>
              <div class="cue" v-show="roundNumberErr"><i></i>轮数不能为空</div>
            </div>
          </div>
          <div class="team marginLeft">
            <h4>队伍数</h4>
            <!-- <h4><i></i>队伍数</h4> -->
            <div class="teamCen">
              <select v-model="createCourseData.teamsNumber"  @blur="validateData('teamsNumber')" @change="validateData('teamsNumber')">
                <option v-for="(troopsoption,index) in troopsoptions" v-bind:value="troopsoption.value" :key="index">{{troopsoption.text}}</option>
              </select>
              <div class="cue" v-show="teamsNumberErr"><i></i>队伍数不能为空</div>
            </div>
          </div>
        </div>
        <button :disabled="hasError" @click="next()">下一步</button> 
      </div>
      <!-- 创建课程-01结束 -->  

    <!-- 加入学员-->
    <div class="create_two" v-if="courseListShow == 'jrxy'">

      <div class="guide">
        <i>✔</i><i></i><i>2</i>
        <p><span>创建课程</span><span class="blue">加入学员</span></p>
      </div>
      <div class="contenttwo">
        <div class="establishNav">
          
          <span :class="{'blueb':creatListShow == 'sdcj'}" @click="sdcj()">手动创建
            <el-tooltip :popper-class="toolTipClass"
              class="item" effect="dark" 
              content="创建队伍最少需填写4组，最多6组，请根据您的需求填写信息,未填写的输入框不会读取信息。" 
              placement="right">
              <img src="../../static/image/tipIcon.png" alt="" class="tipIcon"> 
            </el-tooltip> 
            
            <!-- <img src="../../static/image/tipIcon.png" alt="" class="tipIcon">  -->
          </span>
          <span :class="{'blueb':creatListShow == 'pldy'}" @click="pldy()">批量导入</span>
        </div>

        <!-- 手动创建开始 -->
        <div class="manual" id="team" v-if="creatListShow == 'sdcj'">
          <!-- <div class="team_cen" v-for="listAll in requestTeams"> -->
          <div class="manualTeam">
            <div class="manualTeamOne" v-for="(listAll,teamIndex) in requestTeams" :key="teamIndex">
              <table class="recordStudentTable">
                <thead>
                  <tr>
                    <th>{{listAll.teamName}}</th>
                    <th>手机号</th>
                    <!-- <th>姓名</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>年龄</th>     -->
                    <!-- <th @click="removeTeams(teamIndex)" v-if="teamIndex != 0"></th>  -->
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(person,personIndex) in listAll.requestTeamMembers" :key="personIndex">
                    <td>队员{{personIndex+1}}</td>
                    <td>
                      <!-- <input type="tel" v-model="person.mobile" @blur="telValidator"> -->
                      <input type="tel" v-model="person.mobile" @blur="blurValidator(person.mobile,requestTeams,$event)">
                      <div class="cue"></div>
                      <!-- <div class="cue" style="display:none"><i></i>手机号码不能为空</div>
                      <div class="cue" style="display:none"><i></i>手机号码格式不正确</div>
                      <div class="cue" style="display:none"><i></i>手机号码格重复</div> -->
                    </td>
                    <!-- <td>
                      <input type="text">
                    <td> -->
                      <!-- <select>
                        <option>男</option>
                        <option>女</option>                        
                      </select>
                    </td> -->
                    <!-- <td>
                      <select>
                        <option>产品经理</option>
                        <option>ui设计师</option>
                        <option>项目经理</option>
                        <option>活动策划</option>                        
                      </select>
                    </td> -->
                    <!-- <td>
                      <input type="text">
                    </td> -->
                    <td></td>
                    <!-- 成员删除 -->
                    <!-- <td><span @click="removeStudent(teamIndex,personIndex)" v-if="personIndex!=0"></span></td> -->
                    <!-- 5月25日 span instead of a -->
                  </tr>   

                </tbody>
                <!-- <tfoot>
                  <tr>                    
                    <td><span @click="addNewStudent(teamIndex)">新增学员</span></td>
                    5月25日 span instead of a
                  </tr>
                </tfoot> -->
              </table>
            </div>            
            <div class="clear"></div>
            <!-- <div class="addteam" v-on:click="addTeam()">新增队伍</div> -->
          </div> 
          <!-- 手动创建底部按钮 -->
          <div class="btntwo">
            <button @click="leadingIn()">上一步</button>
            <button  @click="createsuCourse()">创建课程</button>
            <!-- <router-link :to="{name:'course-course',params:{id:list.foundId}}"><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link> -->
          </div> 
          <!-- 手动创建底部按钮 end -->

        </div>
        <!-- 手动创建结束03 -->       
        
        <!-- 批量导入内容开始 -->
        <div class="batch " v-if="creatListShow == 'pldy'">
          <h5>*可选择批量导入学员名单或手动创建学员名单</h5>
          <h4><i></i>导入学员账号</h4>
          <div class="upfile">
            <span class="side" @click="btnUploadClick">上传文件</span>
            <el-upload
              class="upload-demo"
              action="/api/admin/courseMemberExcel"
              :on-success="handleSuccess"
              :before-upload="beforeAvatarUpload"
              >              
              <el-button size="small" type="primary" id="uploadExcel">点击上传</el-button>
            
            </el-upload>
          </div>
          
          <!-- 批量tip -->
          <div class="batchPrompts">
            <div class="promptsTip" v-if="promptsTip"> <img src="../../static/image/failure.png" alt=""> 上传文件只能是xls、xlsx格式！</div>
            <div class="promptContent">
              <p>请依照下列指示操作：</p>
              <p>1.点击 <a href="http://p92g708lv.bkt.clouddn.com/%E5%88%9B%E5%BB%BA%E8%AF%BE%E7%A8%8B%E5%AD%A6%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx">下载批量导入模版</a> </p>
              <p>2. 编辑批量导入模版</p>
              <p>3. 上传编辑过后的批量导入模板</p>
            </div>
            
          </div>
          <!-- 批量tip end-->

          
          <!-- <a class="pattern" href="http://p92g708lv.bkt.clouddn.com/%E5%88%9B%E5%BB%BA%E8%AF%BE%E7%A8%8B%E5%AD%A6%E5%91%98%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx">下载批量导入模板</a>   -->
          


          <!-- 批量导入底部按钮 -->
          <div class="btnone">
            <button @click="lastStep()">上一步</button>  
            <!-- <button @click="confirmation()">创建课程</button> -->
            <button @click="createCourse()">创建课程</button>
          </div> 
          <!-- 批量导入底部按钮 end -->          
        </div>
        <!-- 批量导入内容结束 -->                
      </div>      

    </div>
    <!-- 加入学员 end -->

    </div>
    <!-- 创建课程ALL end-->

    <!-- 导入课程失败04 弹框 -->
    <div class="importFailureBlackbg" v-if="faModal == 1">
      <div class="failureone">
        <i @click="closefaModal()"></i>
        <h3>导入失败</h3>
        <img src="../../static/image/failure.png">
        <h4>请返回上一步重新导入</h4>
        <button @click="closefaModal()">返回</button>
      </div>
    </div>
    <!-- 导入课程弹框失败04end -->
    
    <!-- 导入信息内容确认弹框 -->
    <div class="verifyBlackbg" v-if="plModal == 1">
      <div class="impor_information">
        <i @click="closeplModal()"></i>
        <div class="inport_title">
          <h3>批量导入</h3>
          <h6>Import Member</h6>
        </div>
        <!-- shangxia  -->
        <div class="confirmation">
          <div class="confirmationTeam">
            <div class="confirmationTeamOne" v-for="(listAll,teamIndex) in requestTeams2" :key='teamIndex'>
              <!-- <div class="teamtitle">
                  队伍名称<input type="text">
                </div> -->
              <table class="informationStudentTable">
                
                <thead>    
                  <tr>              
                    <th>{{listAll.teamName}}</th>
                    <th>手机号</th>
                    <!-- <th>姓名</th>
                    <th>性别</th>
                    <th>职位</th>
                    <th>年龄</th> -->
                    <!-- <th></th>  -->
                    <!-- <th @click="removeTeams2(teamIndex)" v-if="teamIndex != 0"></th>  -->
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(person,personIndex) in listAll.requestTeamMembers" :key='personIndex'>
                    <td>学员{{personIndex+1}}</td>
                    <td>
                      <input type="tel" v-model="person.mobile" @blur="blurValidator(person.mobile,requestTeams2,$event)">
                      <div class="cue2"></div>
                    </td>
                     <!-- <td>
                      <input type="text">
                    <td>
                      <select>
                        <option>男</option>
                        <option>女</option>                        
                      </select>
                    </td>
                    <td>
                      <select>
                        <option>产品经理</option>
                        <option>ui设计师</option>
                        <option>项目经理</option>
                        <option>活动策划</option>                        
                      </select>
                    </td>
                    <td>
                      <input type="text">
                    </td> -->
                    <td></td>
                    <!-- <td><span @click="removeStudent2(teamIndex,personIndex)" v-if="personIndex!=0"></span></td> -->
                  </tr>   

                </tbody>
                <!-- <tfoot>
                  <tr>                    
                    <td><span @click="addNewStudent2(teamIndex)">新增学员</span></td>
                  </tr>
                </tfoot> -->
              </table>
            </div>            
            <div class="clear"></div>
            <!-- <div class="addteam" v-on:click="addTeam2()">新增队伍</div> -->
          </div>                                         
        </div>
        <div class="btn_sure">
          <button @click="closeplModal()">取消</button>
          <!-- <button @click="createfailureCourse()">确认创建</button> -->
          <button @click="confirmCreateCourse()">确认创建</button>
        </div> 
      </div>
    </div>
    <!-- 导入信息内容确认弹框结束 -->
    <!-- 创建课程失败05 -->
    <div class="createFailureBlackbg" v-if="failModal == true">
      <div class="failuretwo">
        <i></i>
        <h3>创建失败</h3>
        <img src="../../static/image/failure.png">
        <h4>请返回上一步重新创建</h4>
        <button>返回</button>
      </div>
    </div>
    <!-- 创建课程失败05 end -->
    <!-- 创建成功 -->
    <div class="reateSuccessfulblackbg" v-if="suModal == 1">
      <div class="succestwo">
        <i @click="closesuModal()"></i>
        <h3>创建成功</h3>
        <img src="../../static/image/succes.png">
        <h4>课程名称：{{createCourseData.courseName}}</h4>
        <h4>开始时间：{{createCourseData.startDate|timeToYMD}} {{createCourseData.startTime}}</h4>
        <h4>结束时间：{{createCourseData.endDate|timeToYMD}} {{createCourseData.endTime}}</h4>
        <!-- <h4>开始时间：{{createCourseData.startTime|timeToYMDHM}}</h4>
        <h4>结束时间：{{createCourseData.endTime|timeToYMDHM}}</h4> -->
        <h4>轮数：<span>{{createCourseData.roundNumber}}</span></h4>
        <h4>队伍数：<span>{{createCourseData.teamsNumber}}</span></h4>
        <button @click="closesuModal()">完成</button>
      </div>
    </div>
    <!-- 创建成功end -->   

    <!-- 选择正确队伍数 dialog -->
    <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" class="dialogContentBox">
      <!-- content -->
      <div class="dialogContent">
        <img src="../../static/image/failure.png" alt="">
        <p>请选择正确队伍数！</p>
      </div>
      <!-- content end-->
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false">返回</el-button>
      </span>
    </el-dialog> 
    <!-- 选择正确队伍数 dialog end--> 

    <!-- 温馨提示-->
    <el-dialog title="" :visible.sync="tipsDialog" width="30%" :before-close="handleClose" class="dialogContentBox">
      <!-- content -->
      <div class="dialogContent">
        <img src="../../static/image/failure.png" alt="">
        <p>
          创建课程时<br>
          请您至少填写4组队伍，每组最少填写一名学员。
        </p>
      </div>
      <!-- content end-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipsDialog = false">确认</el-button>
      </span>
    </el-dialog> 
    <!-- 温馨提示 end-->

    <!-- 温馨提示-->
    <el-dialog title="" :visible.sync="craetTipsDialog" width="30%" :before-close="handleClose" class="dialogContentBox">
      <!-- content -->
      <div class="dialogContent">
        <!-- <img src="../../static/image/failure.png" alt=""> -->
        <h2>温馨提示</h2>
        <p>
          创建队伍最少需填写4组，最多6组<br/>
          请根据您的需求填写信息，未填写的输入框不会读取信息
        </p>

      </div>
      <!-- content end-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="craetTipsDialog = false">确认</el-button>
      </span>
    </el-dialog> 
    <!-- 温馨提示 end-->

    <!-- 手机号错误提示 -->
    <el-dialog title="" :visible.sync="phoneErrorDialog" width="30%" :before-close="handleClose" class="dialogContentBox">
      <!-- content -->
      <div class="dialogContent">
        <img src="../../static/image/failure.png" alt="">
        <p>{{hasErrorText}}</p>
      </div>
      <!-- content end-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="phoneErrorDialog = false">确认</el-button>
      </span>
    </el-dialog> 
    <!-- 手机号错误提示 end-->


    


  </div>
</template>
<script>
  export default {
    data(){     
      return {
        // 导入失败提示
        promptsTip: false,
        toolTipClass:'page-login-toolTipClass',
        // 温馨提示dialog
        tipsDialog:false,
        craetTipsDialog: false,
        dialogVisible:false,
        //手机号码错误提示
        phoneErrorDialog:false,
        itemNum:65,
        itemNum2:65,
        //listShow:'批量导入',
        courseListShow:'cjkc',
        // 导入失败
        faModal:0,
        // 批量导入modal
        plModal:0,
        //成功创建/导入
        suModal:0,      
        //失败创建/导入
        failModal:false,
        creatListShow:'sdcj',
        studentnum : "1",
        usernum:'123321',

        // 创建课程 空 提示
        courseNameErr:false,
        startDateErr:false,
        startTimeErr:false,
        endDateErr:false,
        endTimeHaErr:false,
        endTimeErr:false,
        roundNumberErr:false,
        teamsNumberErr:false,
        hasError:false,//是否有错
        hasErrorText:'',//错误文本
        hasErrorNum:0, // 错误数量

        
				createCourseData:{
					courseName:"",
					startDate:"",
          startTime:"",
					endDate:"",
          endTime:"",
					roundNumber:"",
					teamsNumber:"", // 队伍数
        },
        
        startDate:'',
        endDate:'',
        courseName:'',
        startTime:'',
        endTime:'',
        roundNumber:'',
        teamsNumber:'',
        selected:'',
        newitem: '',

        // 轮数
        options:[
          // {
          //   text:'1', value:'1',            
          // },
          // {
          //   text:'2', value:'2'
          // },
          // {
          //   text:'3', value:'3'
          // },
          {
            text:'4', value:'4'
          },
          {
            text:'5', value:'5'
          },
          {
            text:'6', value:'6'
          }
        ],

        //队伍数
        troopsoptions:[
          // {
          //   text:'1', value:'1',            
          // },
          // {
          //   text:'2', value:'2'
          // },
          // {
          //   text:'3', value:'3'
          // },
          {
            text:'4', value:'4'
          },
          {
            text:'5', value:'5'
          },
          {
            text:'6', value:'6'
          }

        ],

        //创建信息
        requestTeams:[
          {
            teamName:"队伍"+String.fromCharCode(65),
            requestTeamMembers:[
              {mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''}
            ]
          }
          
        ],
        //导入的信息
        requestTeams2:[],
        teamMembers:[

          {
            "pupil":"1", "tell":""
          },
          {
            "pupil":"2", "tell":""
          },
          {
            "pupil":"3", "tell":""
          },
          {
            "pupil":"4", "tell":""
          },
          {
            "pupil":"5", "tell":""
          },
          {
            "pupil":"6", "tell":""
          },
         

        ],
        //导入信息审核
        requestTraineebox:[
          {
            "traineeName":"A队",
            "traineePhone":"手机号"
          },
        ], 

        traineeMembers:[
          {
            "traineeName":"1", "num":""
          },
          {
            "traineeName":"2", "num":""
          },
          {
            "traineeName":"3", "num":""
          },
          {
            "traineeName":"4", "num":""
          },
          {
            "traineeName":"5", "num":""
          },
          {
            "traineeName":"6", "num":""
          },


        ],

        // 号码 空 提示
        phoneEmptyErr:false,
        // 号码 格式错误 提示
        phoneFormatyErr:false,
        // 号码 重复 提示
        phoneRepeatErr:false,
        // 导入是否存在错误,默认无错误
        importHasError:false,

        testPhoneArr:[],

        // 导入返回的数量，用来判断选择的队伍数是否一致
        importNumbers:0,

      }
      
    },
    
    methods:{
      // 下一步
      next:function(){
        this.craetTipsDialog = true;
        // this.tipsDialog = true;
        // this.courseListShow ='jrxy'; //test
        // 根据队伍数生成队伍  
        // let number = parseInt(this.createCourseData.teamsNumber);
        // let data = {};
        // for (let index = 0; index < number-1; index++) {
        //   data = {
        //       teamName:"队伍"+String.fromCharCode(this.itemNum),
        //       requestTeamMembers:[{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''}]
        //   }
        //   this.requestTeams.push(data)
        //   this.itemNum++;
        // }
        
        // 根据队伍数生成队伍 默认6组
        let teamsNumber = 6; // 固定6组，后期根据选择来改变，需要生成多少只要改这个数值就可以，范围判断也可以用此值来做判断，如判断number是否为4-6，否则提示，要改的话下面也需要一起改
        
        let data = {};
        this.requestTeams = []; // 初始化
        this.itemNum = 65; // 初始化
        for (let index = 0; index < teamsNumber; index++) {
          
          data = {
              teamName:"队伍"+String.fromCharCode(this.itemNum),
              requestTeamMembers:[{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''},{mobile:''}]
          }
          this.requestTeams.push(data)
          this.itemNum++;
        }

        for(let item in this.createCourseData){ /**** for start ****/
           if(item == 'courseName'){
              if(this.createCourseData.courseName == ''){
                this.courseNameErr = true;
              }else{
                this.courseNameErr = false;
              }
            }
            if(item == 'startDate'){
              if(this.createCourseData.startDate == ''){
                this.startDateErr = true;
              }else{
                this.startDateErr = false;
              }
            }
            if(item == 'startTime'){
              if(this.createCourseData.startTime == ''){
                this.startTimeErr = true;
              }else{
                this.startTimeErr = false;
              }
            }
            if(item == 'endDate'){
              if(this.createCourseData.endDate == ''){
                this.endDateErr = true;
              }else{
                this.endDateErr = false;
              }
            }
            if(item == 'endTime'){
              if(this.createCourseData.endTime == ''){
                this.endTimeErr = true;
              }else{
                this.endTimeErr = false;
              }
            }
            if(item == 'roundNumber'){
              if(this.createCourseData.roundNumber == ''){
                this.roundNumberErr = true;
              }else{
                this.roundNumberErr = false;
              }
            }
            // if(item == 'teamsNumber'){
            //   if(this.createCourseData.teamsNumber == ''){
            //     this.teamsNumberErr = true;
            //   }else{
            //     this.teamsNumberErr = false;
            //   }
            // }
        } /**** for end ****/
        // console.log(this.createCourseData.roundNumber,this.createCourseData.teamsNumber)
        //  只要有一个报错，就会存在disabled禁止按钮点击
        if (this.courseNameErr === false && this.startDateErr === false && 
            this.startTimeErr === false && this.endDateErr === false && 
            this.endTimeErr === false && this.roundNumberErr === false 
            // && this.teamsNumberErr === false
            ){
          this.hasError = false;
          this.courseListShow ='jrxy';
        }else{
          this.hasError = true;
        }
      },
      //上一步  //4.13 9am
      lastStep:function(){
        this.courseListShow = "cjkc"
      },      
      //创建课程返回上一步
      leadingIn:function(){
        this.courseListShow = "cjkc"
      },
      // 批量导入
      pldy:function(){
        this.creatListShow = 'pldy'
      },
      sdcj:function(){
         this.creatListShow = 'sdcj'
      },
      // 导入创建课程
      createCourse:function(){
        // alert("上传创建弹窗")
        if (this.importHasError == true) {
          this.promptsTip = true;
          console.log(this.promptsTip)
          this.$message({  
                message: '上传文件只能是 xls、xlsx格式!',  
                type: 'error'  
            });  
          //alert('导入信息有误，请重试');
          return;
        }
        this.plModal = 1;

        if (this.hasError) {
          this.phoneErrorDialog = true;
            //alert('输入信息有误')
            return
        }
        // 判断上传返回的数组个数与前面选择的队伍数是否一致，必须一致才可以弹窗
        // if (this.createCourseData.teamsNumber == this.importNumbers) {
        //   this.plModal = 1;
        //   console.log(this.plModal);
        // } else {
        //   this.dialogVisible = true;
        //   //alert('请选择正确的队伍数');
        // }
        
      },
      closeplModal(){
        this.plModal = 0;
        console.log(this.plModal);
      },      
      //导入失败
      createfailureCourse:function(){
        this.faModal = 1;
        console.log(this.faModal);
        this.plModal = 0;
        console.log(this.plModal);

      },
      closefaModal(){
        this.faModal = 0;
        console.log(this.faModal);
      },

      // 手动创建课程
      createsuCourse:function(){

        /******** 把非空的值（手机号码）加入到一个数组中 start */
        let mobileArr = [];
        for(let i in this.requestTeams){
          for (let j in this.requestTeams[i].requestTeamMembers){
            if (this.requestTeams[i].requestTeamMembers[j].mobile != '') {
                mobileArr.push(this.requestTeams[i].requestTeamMembers[j].mobile);
            }
          }
        }
        /******** 把非空的值（手机号码）加入到一个数组中 end */

        /******** 循环新的非空号码数组 start */
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
        console.log(mobileArr)
        for (let i = 0; i < mobileArr.length; i++) {
          /******** 先判断当前循环的值格式是否正确 start */
          if (!reg.test(mobileArr[i])) {
            console.log('手机号码格式错误')
            this.phoneErrorDialog = true;           // 弹出错误对话框
            this.hasErrorText = '手机号码格式错误'   // 错误内容
            return
          }
          /******** 先判断当前循环的值格式是否正确 end */

          /******** 然后判断手机号码是否重复 start */
          let count = 0;    // 重复次数，一般只有一次，大于等于2都视为手机号码重复
          for (let j = 0; j < mobileArr.length; j++) {
            // 相等就++
            if (mobileArr[i] == mobileArr[j]) {
             count++
            }
          }

          // 大于等于2，说明存在重复
          if (count>=2) {
            console.log('手机号码重复')
            this.phoneErrorDialog = true;           // 弹出错误对话框
            this.hasErrorText = '手机号码重复'   // 错误内容
            return
          }
          /******** 然后判断手机号码是否重复 end */
        }
        /******** 循环新的非空号码数组 end */

        //debugger
        let usreInfo = sessionStorage.getItem('login');
        let memberId = JSON.parse(usreInfo).id;
        let teamArray = this.requestTeams;
        let temp = [];
        // 当队伍数小于4的操作,这个是用来判断生成的队伍数是否为4个
        if (teamArray.length < 4) {
          this.tipsDialog = true;
          // alert('队伍数小于4');
          return;
        }
        // 到这里的话队伍数生成为6个，但是内容为空，需要继续判断填写内容的队伍数是否小于4，并且成员至少有一个，如果成员一个也没有相当于少一个队伍数
        let teamTotalNum = 0;  // 填写后的队伍数
        // let teamMemberTotalNum = 0; // 填写后的成员数
        for (let i = 0; i < teamArray.length; i++) {
          // 手机号是否为空
          let mobileIsNotEmpty = false;
          // 队伍数组里的成员
          let teamMemberArray = teamArray[i].requestTeamMembers;

          for (let j = 0; j < teamMemberArray.length; j++) {
            if (teamMemberArray[j].mobile != '') {
              mobileIsNotEmpty = true;
            }
          }
          
          // 不为空，队伍+1
          if (mobileIsNotEmpty) {
            teamTotalNum++;
          }
        }

        // 最后如果队伍数小于4，则提示
        if (teamTotalNum<4) {
          this.tipsDialog = true;
          // alert('队伍数小于4');
          return;
        }
      
       
        let courseData = {
          courseName:this.createCourseData.courseName,
          startTime:this.toYmdHis(this.createCourseData.startDate,this.createCourseData.startTime),
          endTime:this.toYmdHis(this.createCourseData.endDate,this.createCourseData.endTime),
          roundNumber:this.createCourseData.roundNumber==''?0:parseInt(this.createCourseData.roundNumber),
          teamsNumber:this.createCourseData.teamsNumber==''?0:parseInt(this.createCourseData.teamsNumber),
          requestTeams:this.requestTeams,
          nickName:'steven1',
	        memberId:memberId,
        };
        console.log(courseData)
        
        this.$http.addCourse(courseData,(res)=>{
          console.log(res)
          // this.courseData = res.data;
          if (res.errCode ==1) {
            this.failModal = true;
          }else{
            this.suModal = 1;
          }
        },(errRes)=>{
          this.failModal = true;
          console.log(errRes)
        })
      },

      // 导入课程弹窗 确认
      confirmCreateCourse(type){
        
        /******** 把非空的值（手机号码）加入到一个数组中 start ********/
        let mobileArr = [];
        for(let i in this.requestTeams2){
          for (let j in this.requestTeams2[i].requestTeamMembers){
            if (this.requestTeams2[i].requestTeamMembers[j].mobile != '') {
                mobileArr.push(this.requestTeams2[i].requestTeamMembers[j].mobile);
            }
          }
        }
        /******** 把非空的值（手机号码）加入到一个数组中 end ********/

        /******** 循环新的非空号码数组 start ********/
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
        console.log(mobileArr)
        for (let i = 0; i < mobileArr.length; i++) {
          /******** 先判断当前循环的值格式是否正确 start ********/
          if (!reg.test(mobileArr[i])) {
            console.log('手机号码格式错误')
            this.phoneErrorDialog = true;           // 弹出错误对话框
            this.hasErrorText = '手机号码格式错误'   // 错误内容
            return
          }
          /******** 先判断当前循环的值格式是否正确 end ********/

          /******** 然后判断手机号码是否重复 start ********/
          let count = 0;    // 重复次数，一般只有一次，大于等于2都视为手机号码重复
          for (let j = 0; j < mobileArr.length; j++) {
            // 相等就++
            if (mobileArr[i] == mobileArr[j]) {
             count++
            }
          }

          // 大于等于2，说明存在重复
          if (count>=2) {
            console.log('手机号码重复')
            this.phoneErrorDialog = true;           // 弹出错误对话框
            this.hasErrorText = '手机号码重复'   // 错误内容
            return
          }
          /******** 然后判断手机号码是否重复 end ********/
        }
        /******** 循环新的非空号码数组 end ********/

        let usreInfo  = sessionStorage.getItem('login');
        let memberId = JSON.parse(usreInfo).id;
        /* 2018-6-25 1:19
        let target = document.getElementsByClassName('informationStudentTable')
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
        let pass = true;
        for(let i in this.requestTeams2){
          for (let j in this.requestTeams2[i].requestTeamMembers){
            let count = 0;
            for (let k in this.requestTeams2){
              for (let l in this.requestTeams2[k].requestTeamMembers){
                if (this.requestTeams2[i].requestTeamMembers[j].mobile == this.requestTeams2[k].requestTeamMembers[l].mobile){
                  count++;
                }
              }
            }
            if(!reg.test(this.requestTeams2[i].requestTeamMembers[j].mobile)){
              target[i].getElementsByClassName('cue2')[j].style.display= 'block';
              target[i].getElementsByClassName('cue2')[j].innerHTML = '手机号码格式错误'
              pass = false;
            }else if(count >= 2) {
              target[i].getElementsByClassName('cue2')[j].style.display= 'block';
              target[i].getElementsByClassName('cue2')[j].innerHTML = '手机号码重复'
              pass = false;
            }else{
              target[i].getElementsByClassName('cue2')[j].innerHTML = '';
              target[i].getElementsByClassName('cue2')[j].style.background="none"
            }
            // if (this.requestTeams2[i].requestTeamMembers[j].mobile == '') {
            //   target[i].getElementsByClassName('cue2')[j].style.display= 'block';
            //   target[i].getElementsByClassName('cue2')[j].innerHTML = '手机号码为空'
            //   pass = false;
            // }else if(!reg.test(this.requestTeams2[i].requestTeamMembers[j].mobile)){
            //   target[i].getElementsByClassName('cue2')[j].style.display= 'block';
            //   target[i].getElementsByClassName('cue2')[j].innerHTML = '手机号码格式错误'
            //   pass = false;
            // }else if(count >= 2) {
            //   target[i].getElementsByClassName('cue2')[j].style.display= 'block';
            //   target[i].getElementsByClassName('cue2')[j].innerHTML = '手机号码重复'
            //   pass = false;
            // }else{
            //   target[i].getElementsByClassName('cue2')[j].innerHTML = '';
            //   target[i].getElementsByClassName('cue2')[j].style.background="none"
            // }
          }
        }*/
        let drteamArray = this.requestTeams2;
        // 当队伍数小于4的操作,这个是用来判断生成的队伍数是否为4个
        if (drteamArray.length < 4) {
          this.tipsDialog = true;
          //alert('队伍数小于4');
          return;
        }
        // 到这里的话队伍数生成为6个，但是内容为空，需要继续判断填写内容的队伍数是否小于4，并且成员至少有一个，如果成员一个也没有相当于少一个队伍数
        let dyteamTotalNum = 0;  // 填写后的队伍数
        let dyteamMemberTotalNum = 0; // 填写后的成员数
        for (let i = 0; i < drteamArray.length; i++) {
          // 手机号是否为空
          let mobileIsEmpty = false;
          // 队伍数组里的成员
          let dyteamMemberArray = drteamArray[i].requestTeamMembers;
          for (let j = 0; j < dyteamMemberArray.length; j++) {
            if (dyteamMemberArray[j].mobile != '') {
              mobileIsEmpty = true;
            }
          }

          if (mobileIsEmpty) {
            dyteamTotalNum++;
          }
        }
        if (dyteamTotalNum<4) {
          this.tipsDialog = true;
          // alert('队伍数小于4');
          return;
        }
        console.log(dyteamTotalNum,dyteamMemberTotalNum)
        // if (!type == 1 && pass == true){ //如果为1 则是失去焦点事件而不发送数据给接口，只验证，只有点击按钮才发送数据给接口，并且验证通过
        if (!type == 1){ //如果为1 则是失去焦点事件而不发送数据给接口，只验证，只有点击按钮才发送数据给接口，并且验证通过
          console.log(this.courseName);
          
          let courseData = {
            courseName:this.createCourseData.courseName,
            startTime:this.toYmdHis(this.createCourseData.startDate,this.createCourseData.startTime),
            endTime:this.toYmdHis(this.createCourseData.endDate,this.createCourseData.endTime),
            roundNumber:this.createCourseData.roundNumber==''?0:parseInt(this.createCourseData.roundNumber),
            teamsNumber:this.createCourseData.teamsNumber==''?0:parseInt(this.createCourseData.teamsNumber),
            nickName:'steven1',
            memberId:memberId,
            requestTeams:this.requestTeams2
          };
          this.$http.addCourse(courseData,(res)=>{
            console.log(res)
            if (res.errCode ==1) {
              this.failModal = true;
              this.plModal = 0;
              console.log('导入弹窗：'+ plModal);
            }else{
              this.plModal = 0;
              this.suModal = 1;
            }
            
          },(errRes)=>{
            this.failModal = true;
            console.log(errRes)
          })
        }
      },
      closesuModal(){
        this.suModal = 0;
        console.log(this.suModal);
        this.$router.push({name:"course-details"});
      },

      

      // 新增学员 手动
      addNewStudent:function(teamIndex){
        let data = {
          mobile:''
        }
        if (this.requestTeams[teamIndex].requestTeamMembers.length < 10) {
          this.requestTeams[teamIndex].requestTeamMembers.push(data)
        }
        
      },

      // 新增学员 导入
      addNewStudent2:function(teamIndex){
        let data = {
          mobile:''
        }
        this.requestTeams2[teamIndex].requestTeamMembers.push(data)
      },

      // 删除学员 手动
      removeStudent: function (teamIndex,index) {
        if (index != 0) this.requestTeams[teamIndex].requestTeamMembers.splice(index,1);
      },
      // 删除学员 导入
      removeStudent2: function (teamIndex,index) {
        if (index != 0) this.requestTeams2[teamIndex].requestTeamMembers.splice(index,1);
      },

      // 新增队伍 手动
      addTeam: function () {
        // 判断队伍数是否小于6，大于6不让新增
        if (this.requestTeams.length < 6) {
          let data = {
              teamName:"队伍"+String.fromCharCode(this.itemNum),
              requestTeamMembers:[]
          }
          this.requestTeams.push(data)
          this.itemNum++;
        }
      },

      // 新增队伍 导入
      addTeam2: function () {
        let data = {
            teamName:"队伍"+String.fromCharCode(this.itemNum2),
            requestTeamMembers:[]
        }
        this.requestTeams2.push(data)
        this.itemNum2++;
      },

      // 删除队伍 手动
      removeTeams: function (teamIndex) {
        // 判断队伍数是否大于4，否则不让删除
        if (this.requestTeams.length > 4) {
          if (teamIndex != 0) this.requestTeams.splice(teamIndex,1);
        }
        
      },
      // 删除队伍 导入
      removeTeams2: function (teamIndex) {
        if (teamIndex != 0) this.requestTeams2.splice(teamIndex,1);
      },

      // 时间转换Y-m-d H:i:s
      toYmdHis:function(dateStr,timeStr){
        let currentDateTime = dateStr + ' ' + timeStr;

        let currentDate = new Date(dateStr);
        // let Year = currentDate.getFullYear().toString();
        // let Month = (currentDate.getMonth()+1).toString();
        // let Day = currentDate.getDate().toString();
        // let dataArr = [Year,Month,Day];
        // let cDate = dataArr.join('-');
        let Year = currentDate.getFullYear();
        let Month = (currentDate.getMonth()+1);
        Month = Month < 10 ? ('0' + Month) : Month;
        let Day = currentDate.getDate();
        Day = Day < 10 ? ('0' + Day) : Day;
        let dataArr = [Year,Month,Day];
        let cDate = dataArr.join('-');
        // let currentTime = new Date(timeStr);
        // let Hours = currentTime.getHours().toString();
        // let Minutes = currentTime.getMinutes().toString();
        // let Seconds = currentTime.getSeconds().toString();
        // let timeArr = [Hours,Minutes,Seconds];
        // let cTime = timeArr.join(':');

        // let currentTime = new Date(timeStr);
        // let Hours = currentTime.getHours();
        // Hours = Hours < 10 ? ('0' + Hours) : Hours;
        // let Minutes = currentTime.getMinutes();
        // Minutes = Minutes < 10 ? ('0' + Minutes) : Minutes;
        // let Seconds = currentTime.getSeconds();
        // Seconds = Seconds < 10 ? ('0' + Seconds) : Seconds;
        // let timeArr = [Hours,Minutes,Seconds];
        // let cTime = timeArr.join(':');
        console.log(cDate + ' ' + timeStr)
        return cDate + ' ' + timeStr;
      },
      // input 失去焦点事件 号码验证
      telValidator:function(e){
        // phoneEmptyErr
        // phoneFormatyErr
        // phoneRepeatErr
       
        let phone = e.target.value;
     
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        // if(phone == ''){
        //   this.phoneEmptyErr = true
        //   // alert("请输入手机号");
        // }else{
        //   this.phoneEmptyErr = false
        // }
        if(!reg.test(phone)){
          //alert("手机格式不正确");
          //this.phoneEmptyErr = false
          this.phoneFormatyErr = true;
        }else{
           this.phoneFormatyErr = false;
          // 发送后端验证
          // this.phoneFormatyErr = false;
          // this.phoneRepeatErr = true;
        }
      },

      validateData:function(type){
        if(type == 'courseName'){
          if(this.createCourseData.courseName == ''){
            this.courseNameErr = true;
          }else{
            this.courseNameErr = false;
          }
        }
        if(type == 'startDate'){
          if(this.createCourseData.startDate == ''){
            this.startDateErr = true;
          }else{
            this.startDateErr = false;
          }
        }
        if(type == 'startTime'){
          if(this.createCourseData.startTime == ''){
            this.startTimeErr = true;
          }else{
            this.startTimeErr = false;
          }
        }
        if(type == 'endDate'){
          if(this.createCourseData.endDate == ''){
            this.endDateErr = true;
            this.endDateErr = false;
          }else if(this.createCourseData.endDate < this.createCourseData.startDate){
            this.endTimeHaErr = true;
            this.endDateErr = false;
          }else{
            this.endDateErr = false;
            this.endTimeHaErr = false;
          }
        }
        if(type == 'endTime'){
          if(this.createCourseData.endTime == ''){
            this.endTimeErr = true;
          }else{
            this.endTimeErr = false;
          }
        }
        if(type == 'roundNumber'){
          if(this.createCourseData.roundNumber == ''){
            this.roundNumberErr = true;
          }else{
            this.roundNumberErr = false;
          }
        }
        // if(type == 'teamsNumber'){
        //   if(this.createCourseData.teamsNumber == ''){
        //     this.teamsNumberErr = true;
        //   }else{
        //     this.teamsNumberErr = false;
        //   }
        // }

        //   只要有一个报错，就会存在disabled禁止按钮点击
        if (this.courseNameErr === false && 
            this.startDateErr === false && 
            this.startTimeErr === false && 
            this.endDateErr === false && 
            this.endTimeErr === false && 
            this.roundNumberErr === false 
            // && this.teamsNumberErr === false
            ){
          this.hasError = false;
        }else{
          this.hasError = true;
        }

      },
      // 点击上传-文件上传成功后的钩子
      handleSuccess(response, file, fileList){
        console.log(response);
        this.importNumbers = response.data.length;
        console.log(this.importNumbers)
        if (response.data.length > 0) {
            this.requestTeams2 = response.data;// 接口返回，然后赋值
            // 批量导入弹窗显示
            this.plModal = 0;
        }else{
          // 导入失败弹窗
          this.faModal = 1;
        }
         
        // let courseData = {
        //   courseName:this.courseName,
        //   startTime:this.toYmdHis(this.startDate,this.startTime),
        //   endTime:this.toYmdHis(this.endDate,this.endTime),
        //   roundNumber:this.roundNumber==''?0:parseInt(this.roundNumber),
        //   teamsNumber:this.teamsNumber==''?0:parseInt(this.teamsNumber),
        //   requestTeams:response.data
        // };
        // console.log(courseData)
      },
      // 上传文件验证
      beforeAvatarUpload(file) {
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                 
        const extension = testmsg === 'xls'  
        const extension2 = testmsg === 'xlsx'  
        const isLt2M = file.size / 1024 / 1024 < 10  
        if(!extension && !extension2) {
          // 如果if进来，说明存在错误，赋值为true，后面只要判断如果为true就提示
          this.importHasError = true;
          this.promptsTip = true;
            this.$message({  
                message: '上传文件只能是 xls、xlsx格式!',  
                type: 'error'  
            });  
        }  
        if(!isLt2M) { 
          // 如果if进来，说明存在错误，赋值为true，后面只要判断如果为true就提示
          this.importHasError = true
            this.$message({  
                message: '上传文件大小不能超过 10MB!',  
                type: 'error'  
            });  
        }  
        return extension || extension2 && isLt2M  
      },
      submitUpload(){
        // this.$refs.upload.submit();
        console.log(this.$refs.upload)
        // this.$http.courseExc();
      },

      // 手动创建 验证
      blurValidator(mobile,requestTeamsArr,event){ //失去焦点验证

        let count = 0;
        let nextTarget = event.target.nextElementSibling;
        for(let i in requestTeamsArr){
          for (let j in requestTeamsArr[i].requestTeamMembers){
            if (requestTeamsArr[i].requestTeamMembers[j].mobile == mobile) {
              count++;
            }
          }
        }

        let reg = /^[1][3,4,5,7,8][0-9]{9}$/; //格式正则表达式
 
        // // 基本验证
        // if(mobile == ''){
        //   nextTarget.style.display= 'block';
        //   nextTarget.innerHTML = '手机号码为空'
        // }else if(!reg.test(mobile)){
        //   nextTarget.innerHTML = '手机号码格式错误'
        //   nextTarget.style.display= 'block'
        // }else if(count>=2){
        //   nextTarget.innerHTML = '手机号码重复'
        //   nextTarget.style.display= 'block'
        // }else{
        //   nextTarget.innerHTML = ''
        //   nextTarget.style.background= 'none'
        // }
        // 基本验证
        

        if (mobile != '') {
          if(!reg.test(mobile)){
            nextTarget.innerHTML = '手机号码格式错误'
            nextTarget.style.display= 'block'
            this.hasError = true
            this.hasErrorText = '手机号有错误，请检查填写信息'
          } else if(count>=2){
            nextTarget.innerHTML = '手机号码重复'
            nextTarget.style.display= 'block'
            this.hasError = true
            this.hasErrorText = '手机号码重复，请检查手机号'
          } else {
            nextTarget.innerHTML = ''
            nextTarget.style.background= 'none'
            this.hasError = false
            this.hasErrorText = ''
          
          }
          // console.log(this.hasError)
        }
        // this.confirmCreateCourse(1);
      },

      
      btnUploadClick(){
        document.getElementById('uploadExcel').click() //触发按钮事件
      },
      // 关闭dialog
      handleClose(done) {
        this.dialogVisible = false;
        this.tipsDialog = false;
        this.craetTipsDialog = false;

        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      }


    },
    created(){

    },
    mounted(){
     // this.addCourse();
    }

  }
    
  
</script>

